<template>
  <div class="collapse-item">
    <div class="header" @click="handleHeaderClick">
      <h4>{{title}}</h4>
    </div>
    <transition name="show-fade">
      <div class="wrap" v-show="isShow">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>


<script>
export default {
  name: "hmCollapseItem",
  props: {
    title: {
      type: String,
      default: "默认标题",
    },
    name: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {};
  },
  inject: {
    hmCollapseValue: {
      default: "1",
    },
    hmCollapse: {},
  },
  computed: {
    isShow() {
      return this.hmCollapseValue.includes(this.name);
    },
  },
  methods: {
    handleHeaderClick() {
      //拿到collapse的实例，触发它的emit
      this.hmCollapse.$emit("item-click", this.name);
    },
  },
};
</script>



<style lang="scss">

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.show-fade-enter-active {
  transition: all 3.3s ease;
}
.show-fade-leave-active {
  transition: all 3.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.show-fade-enter, .show-fade-leave-to {
  height: 0;
}

.show-fade-enter-to, .show-fade-leave {
  height: 200%;
}


.collapse-item {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;

  .wrap{
    overflow: hidden;
  }
}
</style>